<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户列表管理 - CRM旅游管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* Apple Design System Variables */
        :root {
            --system-background: #ffffff;
            --fill-secondary: #f2f2f7;
            --fill-tertiary: #f2f2f7;
            --label-primary: #000000;
            --label-secondary: #3c3c43;
            --label-tertiary: #3c3c4399;
            --separator-non-opaque: #c6c6c8;
            --separator-opaque: #38383a;
            --customer-primary: #007AFF;
            --customer-active: #34C759;
            --customer-potential: #007AFF;
            --customer-inactive: #8E8E93;
            --customer-completed: #FF9500;
            --customer-blacklist: #FF3B30;
            --health-excellent: #34C759;
            --health-good: #FFCC00;
            --health-fair: #FF9500;
            --health-poor: #FF3B30;
            --tag-vip: #AF52DE;
            --tag-quality: #5AC8FA;
            --tag-normal: #8E8E93;
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-16: 64px;
            --space-page-padding: 24px;
            --radius-small: 4px;
            --radius-medium: 8px;
            --radius-large: 12px;
            --radius-full: 50px;
            --text-xs: 12px;
            --text-sm: 14px;
            --text-base: 16px;
            --text-lg: 18px;
            --text-xl: 20px;
            --text-2xl: 24px;
            --text-4xl: 36px;
            --weight-medium: 500;
            --weight-semibold: 600;
            --weight-bold: 700;
            --transition-fast: 0.15s ease;
            --transition-medium: 0.25s ease;
            --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--system-background);
            color: var(--label-primary);
            line-height: 1.5;
        }

        /* Page Header */
        .page-header {
            background: linear-gradient(135deg, var(--customer-primary), var(--customer-potential));
            color: white;
            padding: var(--space-6) var(--space-page-padding);
            border-radius: 0 0 var(--radius-large) var(--radius-large);
            position: relative;
            overflow: hidden;
        }

        .header-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
        }

        .breadcrumb {
            font-size: var(--text-sm);
            opacity: 0.9;
        }

        .breadcrumb .separator {
            margin: 0 var(--space-2);
            opacity: 0.7;
        }

        .header-actions {
            display: flex;
            gap: var(--space-3);
        }

        .btn {
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-medium);
            border: none;
            font-size: var(--text-sm);
            font-weight: var(--weight-medium);
            cursor: pointer;
            transition: all var(--transition-fast);
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            text-decoration: none;
        }

        .btn-primary {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn-secondary {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
        }

        .page-title {
            font-size: var(--text-4xl);
            font-weight: var(--weight-bold);
            margin: 0 0 var(--space-1) 0;
        }

        .page-subtitle {
            font-size: var(--text-base);
            opacity: 0.9;
            margin: 0;
        }

        /* Data Summary Banner */
        .data-summary-banner {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-large);
            padding: var(--space-5);
            margin-top: var(--space-6);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .summary-stats {
            display: flex;
            gap: var(--space-8);
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .stat-label {
            font-size: var(--text-sm);
            opacity: 0.9;
            margin-bottom: var(--space-1);
        }

        .stat-value {
            font-size: var(--text-2xl);
            font-weight: var(--weight-bold);
            font-family: 'SF Mono', Monaco, monospace;
        }

        .stat-value.active { color: var(--customer-active); }
        .stat-value.potential { color: var(--customer-potential); }
        .stat-value.new { color: #34C759; }

        .update-indicator {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: var(--space-2);
        }

        .update-time {
            font-size: var(--text-sm);
            opacity: 0.8;
        }

        .btn-outline {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-xs);
        }

        /* Analytics Panel */
        .customer-analytics-panel {
            padding: var(--space-6) var(--space-page-padding);
            background-color: var(--system-background);
        }

        .analytics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-5);
        }

        .section-title {
            font-size: var(--text-xl);
            font-weight: var(--weight-semibold);
            color: var(--label-primary);
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .analytics-content {
            display: flex;
            gap: var(--space-6);
            align-items: stretch;
        }

        .chart-container {
            background-color: var(--system-background);
            border: 1px solid var(--separator-non-opaque);
            border-radius: var(--radius-large);
            padding: var(--space-5);
            box-shadow: var(--shadow-small);
            height: 300px;
            position: relative;
            flex: 1; /* 添加这行，让每个容器平均分配宽度 */
            min-width: 0; /* 添加这行，防止内容溢出 */
        }

        .chart-title {
            font-size: var(--text-lg);
            font-weight: var(--weight-semibold);
            color: var(--label-primary);
            margin: 0 0 var(--space-4) 0;
            text-align: center;
        }

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            margin-top: var(--space-4);
        }

        .tag-item {
            display: inline-flex;
            align-items: center;
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: var(--weight-medium);
            color: white;
            position: relative;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .tag-item::after {
            content: attr(data-count);
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: rgba(255, 255, 255, 0.9);
            color: var(--label-primary);
            font-size: var(--text-xs);
            padding: 2px 6px;
            border-radius: var(--radius-full);
            font-weight: var(--weight-semibold);
        }

        .tag-item.vip { 
            background-color: var(--tag-vip);
            font-size: var(--text-base);
        }
        .tag-item.quality { background-color: var(--tag-quality); }
        .tag-item.normal { background-color: var(--tag-normal); }
        .tag-item.price-sensitive { background-color: #FF9500; }
        .tag-item.easy-communicate { background-color: var(--customer-active); }
        .tag-item.need-care { background-color: #5AC8FA; }
        .tag-item.group-tour { background-color: var(--customer-primary); }
        .tag-item.healthy { background-color: var(--health-excellent); }

        .tag-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        /* Search Filter Controls */
        .search-filter-controls {
            padding: var(--space-5) var(--space-page-padding);
            background-color: var(--fill-secondary);
        }

        .search-input-group {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }

        .search-input {
            flex: 1;
            padding: var(--space-3) var(--space-4);
            border: 2px solid var(--separator-non-opaque);
            border-radius: var(--radius-large);
            font-size: var(--text-base);
            background-color: var(--system-background);
            color: var(--label-primary);
            transition: all var(--transition-fast);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--customer-primary);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        .search-btn, .advanced-search-btn {
            padding: var(--space-3) var(--space-4);
            border: none;
            border-radius: var(--radius-medium);
            font-size: var(--text-base);
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .search-btn {
            background-color: var(--customer-primary);
            color: white;
        }

        .advanced-search-btn {
            background-color: var(--system-background);
            color: var(--label-primary);
            border: 1px solid var(--separator-non-opaque);
        }

        .quick-filters {
            display: flex;
            gap: var(--space-3);
            flex-wrap: wrap;
        }

        .filter-chip {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            border: 1px solid var(--separator-non-opaque);
            border-radius: var(--radius-full);
            background-color: var(--system-background);
            color: var(--label-primary);
            font-size: var(--text-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .filter-chip.active {
            background-color: var(--customer-primary);
            color: white;
            border-color: var(--customer-primary);
        }

        .chip-count {
            background-color: rgba(255, 255, 255, 0.2);
            color: inherit;
            padding: 2px 6px;
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--weight-semibold);
        }

        /* Customer List Section */
        .customer-list-section {
            padding: var(--space-5) var(--space-page-padding);
            background-color: var(--system-background);
        }

        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-5);
            padding-bottom: var(--space-4);
            border-bottom: 1px solid var(--separator-non-opaque);
        }

        .view-controls {
            display: flex;
            align-items: center;
            gap: var(--space-6);
        }

        .view-toggle {
            display: flex;
            border: 1px solid var(--separator-non-opaque);
            border-radius: var(--radius-medium);
            overflow: hidden;
        }

        .view-btn {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            border: none;
            background-color: var(--system-background);
            color: var(--label-secondary);
            font-size: var(--text-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .view-btn.active {
            background-color: var(--customer-primary);
            color: white;
        }

        .sort-controls {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .sort-label {
            font-size: var(--text-sm);
            color: var(--label-secondary);
            font-weight: var(--weight-medium);
        }

        .sort-select {
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--separator-non-opaque);
            border-radius: var(--radius-medium);
            font-size: var(--text-sm);
            background-color: var(--system-background);
        }

        /* Table Styles */
        .table-container {
            background-color: var(--system-background);
            border: 1px solid var(--separator-non-opaque);
            border-radius: var(--radius-large);
            overflow: hidden;
            box-shadow: var(--shadow-small);
        }

        .customer-table {
            width: 100%;
            border-collapse: collapse;
        }

        .customer-table thead {
            background-color: var(--fill-secondary);
        }

        .customer-table th {
            padding: var(--space-4) var(--space-3);
            text-align: left;
            font-size: var(--text-sm);
            font-weight: var(--weight-semibold);
            color: var(--label-primary);
            border-bottom: 1px solid var(--separator-non-opaque);
        }

        .customer-table tbody tr {
            border-bottom: 1px solid var(--separator-non-opaque);
            transition: background-color var(--transition-fast);
        }

        .customer-table tbody tr:hover {
            background-color: var(--fill-secondary);
        }

        .customer-table td {
            padding: var(--space-3);
            font-size: var(--text-sm);
            color: var(--label-primary);
            vertical-align: middle;
        }

        .name-cell {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .customer-avatar {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-medium);
            object-fit: cover;
        }

        .name-text {
            font-weight: var(--weight-medium);
            color: var(--label-primary);
        }

        .customer-id {
            font-family: 'SF Mono', Monaco, monospace;
            color: var(--label-secondary);
            font-size: var(--text-xs);
        }

        .phone {
            font-family: 'SF Mono', Monaco, monospace;
        }

        /* Status Badge */
        .status-badge {
            display: inline-block;
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--weight-semibold);
            text-align: center;
            min-width: 80px;
        }

        .status-badge.active {
            background-color: rgba(52, 199, 89, 0.1);
            color: var(--customer-active);
            border: 1px solid var(--customer-active);
        }

        .status-badge.potential {
            background-color: rgba(0, 122, 255, 0.1);
            color: var(--customer-potential);
            border: 1px solid var(--customer-potential);
        }

        .status-badge.inactive {
            background-color: rgba(142, 142, 147, 0.1);
            color: var(--customer-inactive);
            border: 1px solid var(--customer-inactive);
        }

        .status-badge.completed {
            background-color: rgba(255, 149, 0, 0.1);
            color: var(--customer-completed);
            border: 1px solid var(--customer-completed);
        }

        /* Health Indicator */
        .health-indicator {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            font-size: var(--text-xs);
            font-weight: var(--weight-medium);
        }

        .health-indicator::before {
            content: '●';
            font-size: 16px;
        }

        .health-indicator.excellent {
            color: var(--health-excellent);
        }

        .health-indicator.good {
            color: var(--health-good);
        }

        .health-indicator.fair {
            color: var(--health-fair);
        }

        .health-indicator.poor {
            color: var(--health-poor);
        }

        /* Tag List */
        .tag-list {
            display: flex;
            gap: var(--space-1);
            flex-wrap: wrap;
            align-items: center;
        }

        .tag-list .tag-item {
            padding: 2px var(--space-2);
            border-radius: var(--radius-small);
            font-size: 10px;
            font-weight: var(--weight-medium);
            color: white;
            white-space: nowrap;
        }

        .tag-more {
            color: var(--label-secondary);
            font-size: var(--text-xs);
            cursor: pointer;
        }

        .tag-more:hover {
            color: var(--customer-primary);
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: var(--space-1);
            align-items: center;
        }

        .btn-sm {
            padding: var(--space-1) var(--space-2);
            font-size: var(--text-xs);
            min-width: auto;
        }

        .btn-outline {
            background-color: var(--system-background);
            color: var(--label-primary);
            border: 1px solid var(--separator-non-opaque);
        }

        .btn-outline:hover {
            background-color: var(--fill-secondary);
        }

        /* Pagination */
        .list-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-5) var(--space-page-padding);
            background-color: var(--system-background);
            border-top: 1px solid var(--separator-non-opaque);
        }

        .pagination-info {
            display: flex;
            align-items: center;
            gap: var(--space-6);
        }

        .info-text {
            font-size: var(--text-sm);
            color: var(--label-secondary);
        }

        .pagination-controls {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .page-numbers {
            display: flex;
            gap: var(--space-1);
            align-items: center;
            margin: 0 var(--space-3);
        }

        .page-number-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--separator-non-opaque);
            border-radius: var(--radius-medium);
            background-color: var(--system-background);
            color: var(--label-primary);
            font-size: var(--text-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
        }

        .page-number-btn:hover {
            background-color: var(--fill-secondary);
        }

        .page-number-btn.active {
            background-color: var(--customer-primary);
            color: white;
            border-color: var(--customer-primary);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header-navigation {
                flex-direction: column;
                gap: var(--space-4);
                align-items: stretch;
            }

            .data-summary-banner {
                flex-direction: column;
                gap: var(--space-4);
                text-align: center;
            }

            .analytics-content {
                flex-direction: column; /* 移动端改为垂直排列 */
            }

            .search-input-group {
                flex-direction: column;
                align-items: stretch;
            }

            .list-header {
                flex-direction: column;
                gap: var(--space-4);
                align-items: stretch;
            }

            .list-footer {
                flex-direction: column;
                gap: var(--space-4);
            }
        }

        .hidden {
            display: none;
        }

        /* Icons */
        .icon::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .icon-download::before { content: '⬇️'; }
        .icon-upload::before { content: '⬆️'; }
        .icon-plus::before { content: '➕'; }
        .icon-chart::before { content: '📊'; }
        .icon-search::before { content: '🔍'; }
        .icon-filter::before { content: '🔽'; }
        .icon-table::before { content: '📋'; }
        .icon-grid::before { content: '⊞'; }
        .icon-eye::before { content: '👁️'; }
        .icon-edit::before { content: '✏️'; }
        .icon-phone::before { content: '📞'; }
        .icon-more::before { content: '⋯'; }
        .icon-refresh::before { content: '🔄'; }

        /* Checkbox Styles */
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            cursor: pointer;
        }

        .checkbox-item input[type="checkbox"] {
            display: none;
        }

        .checkbox-mark {
            width: 18px;
            height: 18px;
            border: 2px solid var(--separator-opaque);
            border-radius: var(--radius-small);
            background-color: var(--system-background);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
        }

        .checkbox-item input[type="checkbox"]:checked + .checkbox-mark {
            background-color: var(--customer-primary);
            border-color: var(--customer-primary);
        }

        .checkbox-item input[type="checkbox"]:checked + .checkbox-mark::after {
            content: '✓';
            color: white;
            font-weight: var(--weight-bold);
            font-size: 12px;
        }
    </style>
</head>
<body class="customer-list-page">
    <!-- Page Header -->
    <header class="page-header">
        <div class="header-navigation">
            <nav class="breadcrumb">
                <span>CRM系统</span>
                <span class="separator">></span>
                <span>客户档案管理</span>
                <span class="separator">></span>
                <span class="current">客户列表</span>
            </nav>
            
            <div class="header-actions">
                <button class="btn btn-secondary" onclick="exportCustomerData()">
                    <span class="icon icon-download"></span>
                    导出数据
                </button>
                <button class="btn btn-secondary" onclick="importCustomerData()">
                    <span class="icon icon-upload"></span>
                    批量导入
                </button>
                <button class="btn btn-primary" onclick="createNewCustomer()">
                    <span class="icon icon-plus"></span>
                    新增客户
                </button>
            </div>
        </div>
        
        <div class="page-title-section">
            <h1 class="page-title">客户列表管理</h1>
            <p class="page-subtitle">管理中老年旅游客户档案，精准服务每一位客户</p>
        </div>
        
        <!-- Data Summary Banner -->
        <div class="data-summary-banner" id="dataSummaryBanner">
            <div class="summary-stats">
                <div class="stat-item">
                    <span class="stat-label">客户总数</span>
                    <span class="stat-value" id="totalCustomers">1,248</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">有效客户</span>
                    <span class="stat-value active" id="activeCustomers">856</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">潜在客户</span>
                    <span class="stat-value potential" id="potentialCustomers">278</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">本月新增</span>
                    <span class="stat-value new" id="monthlyNew">42</span>
                </div>
            </div>
            <div class="update-indicator">
                <span class="update-time">数据更新时间: 2025-01-21 15:30</span>
                <button class="btn btn-sm btn-outline" onclick="refreshCustomerData()">
                    <span class="icon icon-refresh"></span>
                    刷新
                </button>
            </div>
        </div>
    </header>

    <!-- Customer Analytics Panel -->
    <section class="customer-analytics-panel">
        <div class="analytics-header">
            <h3 class="section-title">
                <span class="icon icon-chart"></span>
                客户状态分析
            </h3>
        </div>
        
        <div class="analytics-content">
            <!-- Customer Status Chart -->
            <div class="chart-container" id="statusChart">
                <h4 class="chart-title">客户状态分布</h4>
                <canvas id="customerStatusChart"></canvas>
            </div>
            
            <!-- Health Status Chart -->
            <div class="chart-container" id="healthChart">
                <h4 class="chart-title">健康状况分布</h4>
                <canvas id="customerHealthChart"></canvas>
            </div>
            
            <!-- Tag Cloud -->
            <div class="chart-container">
                <h4 class="chart-title">客户标签分布</h4>
                <div class="tag-cloud" id="customerTagCloud">
                    <span class="tag-item vip" data-count="156">VIP客户</span>
                    <span class="tag-item quality" data-count="298">优质客户</span>
                    <span class="tag-item normal" data-count="468">普通客户</span>
                    <span class="tag-item price-sensitive" data-count="326">价格敏感</span>
                    <span class="tag-item easy-communicate" data-count="445">易沟通</span>
                    <span class="tag-item need-care" data-count="178">需要关怀</span>
                    <span class="tag-item group-tour" data-count="567">喜欢跟团</span>
                    <span class="tag-item healthy" data-count="789">身体健康</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Search Filter Controls -->
    <section class="search-filter-controls">
        <div class="search-section">
            <div class="search-input-group">
                <input type="text" 
                       class="search-input" 
                       id="customerSearch"
                       placeholder="搜索客户姓名、手机号或客户编号"
                       autocomplete="off">
                <button class="search-btn" onclick="performSearch()">
                    <span class="icon icon-search"></span>
                </button>
                <button class="advanced-search-btn" onclick="toggleAdvancedSearch()">
                    <span class="icon icon-filter"></span>
                    高级筛选
                </button>
            </div>
            
            <div class="quick-filters">
                <button class="filter-chip active" data-filter="all">
                    全部 <span class="chip-count">1,248</span>
                </button>
                <button class="filter-chip" data-filter="active">
                    有效客户 <span class="chip-count">856</span>
                </button>
                <button class="filter-chip" data-filter="potential">
                    潜在客户 <span class="chip-count">278</span>
                </button>
                <button class="filter-chip" data-filter="completed">
                    已成交 <span class="chip-count">98</span>
                </button>
                <button class="filter-chip" data-filter="vip">
                    VIP客户 <span class="chip-count">156</span>
                </button>
            </div>
        </div>
    </section>

    <!-- Customer List Section -->
    <section class="customer-list-section">
        <div class="list-header">
            <div class="view-controls">
                <div class="view-toggle">
                    <button class="view-btn active" data-view="table">
                        <span class="icon icon-table"></span>
                        表格视图
                    </button>
                    <button class="view-btn" data-view="card">
                        <span class="icon icon-grid"></span>
                        卡片视图
                    </button>
                </div>
                
                <div class="sort-controls">
                    <label class="sort-label">排序：</label>
                    <select class="sort-select" id="sortSelect">
                        <option value="created_desc">创建时间↓</option>
                        <option value="created_asc">创建时间↑</option>
                        <option value="name_asc">姓名↑</option>
                        <option value="name_desc">姓名↓</option>
                        <option value="age_asc">年龄↑</option>
                        <option value="age_desc">年龄↓</option>
                        <option value="last_contact_desc">最近联系↓</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- Table View -->
        <div class="table-view active" id="tableView">
            <div class="table-container">
                <table class="customer-table">
                    <thead>
                        <tr>
                            <th class="select-column">
                                <label class="checkbox-item">
                                    <input type="checkbox" id="selectAllCheckbox">
                                    <span class="checkbox-mark"></span>
                                </label>
                            </th>
                            <th>客户编号</th>
                            <th>客户姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>联系电话</th>
                            <th>客户状态</th>
                            <th>健康状况</th>
                            <th>客户标签</th>
                            <th>创建时间</th>
                            <th class="actions-column">操作</th>
                        </tr>
                    </thead>
                    <tbody id="customerTableBody">
                        <!-- Sample Data -->
                        <tr class="customer-row">
                            <td class="select-cell">
                                <label class="checkbox-item">
                                    <input type="checkbox" class="row-checkbox" value="CRM2025000001">
                                    <span class="checkbox-mark"></span>
                                </label>
                            </td>
                            <td class="customer-id">CRM2025000001</td>
                            <td class="customer-name">
                                <div class="name-cell">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' fill='%23007AFF'/%3E%3Ctext x='18' y='24' text-anchor='middle' fill='white' font-size='16' font-family='Arial'%3E张%3C/text%3E%3C/svg%3E" alt="客户头像" class="customer-avatar">
                                    <span class="name-text">张大爷</span>
                                </div>
                            </td>
                            <td class="gender">男</td>
                            <td class="age">68</td>
                            <td class="phone">138****8888</td>
                            <td class="status">
                                <span class="status-badge active">有效客户</span>
                            </td>
                            <td class="health">
                                <span class="health-indicator excellent" title="健康良好">
                                    健康良好
                                </span>
                            </td>
                            <td class="tags">
                                <div class="tag-list">
                                    <span class="tag-item vip">VIP客户</span>
                                    <span class="tag-item easy-communicate">易沟通</span>
                                    <span class="tag-more">+2</span>
                                </div>
                            </td>
                            <td class="created-time">2025-01-15</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="btn btn-sm btn-outline" onclick="viewCustomer('CRM2025000001')" title="查看详情">
                                        <span class="icon icon-eye"></span>
                                    </button>
                                    <button class="btn btn-sm btn-outline" onclick="editCustomer('CRM2025000001')" title="编辑">
                                        <span class="icon icon-edit"></span>
                                    </button>
                                    <button class="btn btn-sm btn-outline" onclick="contactCustomer('CRM2025000001')" title="联系">
                                        <span class="icon icon-phone"></span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- More sample rows -->
                        <tr class="customer-row">
                            <td class="select-cell">
                                <label class="checkbox-item">
                                    <input type="checkbox" class="row-checkbox" value="CRM2025000002">
                                    <span class="checkbox-mark"></span>
                                </label>
                            </td>
                            <td class="customer-id">CRM2025000002</td>
                            <td class="customer-name">
                                <div class="name-cell">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' fill='%23AF52DE'/%3E%3Ctext x='18' y='24' text-anchor='middle' fill='white' font-size='16' font-family='Arial'%3E李%3C/text%3E%3C/svg%3E" alt="客户头像" class="customer-avatar">
                                    <span class="name-text">李阿姨</span>
                                </div>
                            </td>
                            <td class="gender">女</td>
                            <td class="age">62</td>
                            <td class="phone">139****7777</td>
                            <td class="status">
                                <span class="status-badge potential">潜在客户</span>
                            </td>
                            <td class="health">
                                <span class="health-indicator good" title="健康一般">
                                    健康一般
                                </span>
                            </td>
                            <td class="tags">
                                <div class="tag-list">
                                    <span class="tag-item quality">优质客户</span>
                                    <span class="tag-item price-sensitive">价格敏感</span>
                                </div>
                            </td>
                            <td class="created-time">2025-01-14</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="btn btn-sm btn-outline" onclick="viewCustomer('CRM2025000002')" title="查看详情">
                                        <span class="icon icon-eye"></span>
                                    </button>
                                    <button class="btn btn-sm btn-outline" onclick="editCustomer('CRM2025000002')" title="编辑">
                                        <span class="icon icon-edit"></span>
                                    </button>
                                    <button class="btn btn-sm btn-outline" onclick="contactCustomer('CRM2025000002')" title="联系">
                                        <span class="icon icon-phone"></span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- Pagination -->
    <section class="list-footer">
        <div class="pagination-info">
            <span class="info-text">
                显示第 <span id="startIndex">1</span>-<span id="endIndex">20</span> 条，
                共 <span id="totalCount">1,248</span> 条记录
            </span>
        </div>
        
        <div class="pagination-controls">
            <button class="btn btn-outline" onclick="goToFirstPage()" id="firstPageBtn">
                首页
            </button>
            <button class="btn btn-outline" onclick="goToPrevPage()" id="prevPageBtn">
                上一页
            </button>
            
            <div class="page-numbers" id="pageNumbers">
                <button class="page-number-btn active">1</button>
                <button class="page-number-btn">2</button>
                <button class="page-number-btn">3</button>
                <span class="page-ellipsis">...</span>
                <button class="page-number-btn">63</button>
            </div>
            
            <button class="btn btn-outline" onclick="goToNextPage()" id="nextPageBtn">
                下一页
            </button>
            <button class="btn btn-outline" onclick="goToLastPage()" id="lastPageBtn">
                末页
            </button>
        </div>
    </section>

    <script>
        // Initialize charts
        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            initializeEventListeners();
        });

        function initializeCharts() {
            // Customer Status Chart
            const statusCtx = document.getElementById('customerStatusChart');
            if (statusCtx) {
                new Chart(statusCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['有效客户', '潜在客户', '无效客户', '已成交客户'],
                        datasets: [{
                            data: [856, 278, 98, 16],
                            backgroundColor: [
                                '#34C759',
                                '#007AFF',
                                '#8E8E93',
                                '#FF9500'
                            ],
                            borderWidth: 0,
                            cutout: '60%'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        aspectRatio: 1,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    usePointStyle: true,
                                    padding: 15
                                }
                            }
                        }
                    }
                });
            }

            // Customer Health Chart
            const healthCtx = document.getElementById('customerHealthChart');
            if (healthCtx) {
                new Chart(healthCtx, {
                    type: 'bar',
                    data: {
                        labels: ['健康良好', '健康一般', '健康较差', '健康很差'],
                        datasets: [{
                            label: '客户数量',
                            data: [789, 298, 134, 27],
                            backgroundColor: [
                                '#34C759',
                                '#FFCC00',
                                '#FF9500',
                                '#FF3B30'
                            ],
                            borderRadius: 6,
                            borderSkipped: false
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        aspectRatio: 1.2,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    stepSize: 100
                                }
                            }
                        }
                    }
                });
            }
        }

        function initializeEventListeners() {
            // Filter chips
            document.querySelectorAll('.filter-chip').forEach(chip => {
                chip.addEventListener('click', function() {
                    document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // View toggle
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // Select all checkbox
            document.getElementById('selectAllCheckbox').addEventListener('change', function() {
                const checkboxes = document.querySelectorAll('.row-checkbox');
                checkboxes.forEach(cb => cb.checked = this.checked);
            });
        }

        // Global functions
        function viewCustomer(customerId) {
            alert('查看客户: ' + customerId);
        }

        function editCustomer(customerId) {
            alert('编辑客户: ' + customerId);
        }

        function contactCustomer(customerId) {
            alert('联系客户: ' + customerId);
        }

        function createNewCustomer() {
            alert('新增客户');
        }

        function exportCustomerData() {
            alert('导出客户数据');
        }

        function importCustomerData() {
            alert('批量导入客户数据');
        }

        function refreshCustomerData() {
            alert('刷新数据');
        }

        function performSearch() {
            const query = document.getElementById('customerSearch').value;
            alert('搜索: ' + query);
        }

        function toggleAdvancedSearch() {
            alert('切换高级搜索');
        }

        function goToFirstPage() {
            alert('跳转到首页');
        }

        function goToPrevPage() {
            alert('跳转到上一页');
        }

        function goToNextPage() {
            alert('跳转到下一页');
        }

        function goToLastPage() {
            alert('跳转到末页');
        }
    </script>
</body>
</html>